:root {
    /* filters */
    --bgColor: #ffffff;
    --shadow: #cccccc;
    --hrowColor: #dddddd;
    --mainGreen: #66b574;
    --darkGreen: #5ba575;
    --btnGreen: #67b279;
    --btnRed: #c23814;
    --inputsBorder: #999999;
    --searchBg: #f3f3f3;
    --tabLabel: #888888;

    /* events */
    --borderColor: #dddddd;
    --thColor: #cccccc;
    --trHover: rgba(234, 182, 117, .1);
    --textColor: #4d4d4d;
    --darkText: #1d1d1d;

    @media (prefers-color-scheme: dark) {
        /* filters */
        --bgColor: #131313;
        --shadow: #111111;
        --hrowColor: #444444;
        --transparent: transparent;
        --mainGreen: #66b574;
        --darkGreen: #5ba575;
        --btnGreen: #67b279;
        --btnRed: #c23814;
        --inputsBorder: #777777;
        --searchBg: #bbbbbb;
        --tabLabel: #888888;

        /* events */
        --borderColor: #444444;
        --thColor: #555555;
        --trHover: rgba(234, 182, 117, .1);
        --textColor: #cccccc;
        --darkText: #dddddd;
    }
}

.light-mode {
    /* filters */
    --bgColor: #ffffff;
    --shadow: #cccccc;
    --hrowColor: #dddddd;
    --mainGreen: #66b574;
    --darkGreen: #5ba575;
    --btnGreen: #67b279;
    --btnRed: #c23814;
    --inputsBorder: #999999;
    --searchBg: #f3f3f3;
    --tabLabel: #888888;

    /* events */
    --borderColor: #dddddd;
    --thColor: #cccccc;
    --trHover: rgba(234, 182, 117, .1);
    --textColor: #4d4d4d;
    --darkText: #1d1d1d;
}

.dark-mode {
    /* filters */
    --bgColor: #131313;
    --shadow: #111111;
    --hrowColor: #444444;
    --transparent: transparent;
    --mainGreen: #66b574;
    --darkGreen: #5ba575;
    --btnGreen: #67b279;
    --btnRed: #c23814;
    --inputsBorder: #777777;
    --searchBg: #bbbbbb;
    --tabLabel: #888888;

    /* events */
    --borderColor: #444444;
    --thColor: #555555;
    --trHover: rgba(234, 182, 117, .1);
    --textColor: #cccccc;
    --darkText: #dddddd;
}
